<!--
 * @Author:
 * @Date: 2023-09-19 15:45:03
 * @LastEditors:
 * @LastEditTime: 2023-09-25 15:37:46
 * @FilePath: \immoka-admin\src\views\dailyFirstRecharge\activitySetting.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
  <el-card class="m-8">
    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column :index="indexMethod" label="序号" type="index" width="120px"></el-table-column>
      <el-table-column label="开始时间" prop="start_at"></el-table-column>
      <el-table-column label="结束时间" prop="end_at"></el-table-column>
      <!-- <el-table-column label="添加时间" prop="created_at"></el-table-column> -->
      <el-table-column label="状态" prop="is_open">
        <template slot-scope="{row}">
          <el-tag v-if="row.is_open === 0" type="warning" size="normal"  effect="dark">关闭</el-tag>
          <el-tag v-else type="success" size="normal"  effect="dark">开启</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="initData"
    />

    <el-dialog
      :title="isEdit?'编辑':'新增'"
      :visible.sync="addDialog2"
      lock-scroll
      width="30%"
      @close="closeAddDialog2"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        <el-form-item label="开始时间" prop="start_at">
          <el-date-picker
            v-model="form.start_at"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择开始时间"
            class="mr-3"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item label="结束时间" prop="end_at">
          <el-date-picker
            v-model="form.end_at"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="is_open">
          <el-radio-group v-model="form.is_open">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>

        </el-form-item>
      </el-form>

      <section slot="footer">
        <el-button @click="addDialog2 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </section>
    </el-dialog>

  </el-card>


</template>

<script>
import {
  rechargeSettingList,
  rechargeSettingSave,
} from '@/api/dailyFirstRecharge'

export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: '已获得初级宝箱'
        },
        {
          value: 2,
          label: '已获得中级宝箱'
        },
        {
          value:3,
          label: '已获得高级宝箱'
        }
      ],
      selectData: '',
      menuList: [],
      tableList: [],
      user_code: '',
      nickname: '',
      dateList: undefined,
      listQuery: {
        type: 1,
        page: 1,
        perPage: 10
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 0,
      /* 弹出框开关 */
      addDialog: false,
      addDialog2: false,

      rejectLoading: false,
      passLoading: false,
      id: '',
      // 拒绝原因
      reject_reason: '',
      form: {
        id: undefined,
        start_at: undefined,
        end_at: undefined,
        is_open: undefined,
      },
      rules: {
        start_at: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        end_at: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        is_open: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
      multipleSelection: [],
      dataIds: '',
      editAllCount: '',
      editAllDialogVisible: false,
      isEdit: false,
      titleList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    indexMethod(index) {
      return this.total - (this.listQuery.page - 1) * this.listQuery.perPage - index
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.isEdit = true
      this.addDialog2 = true
    },
    handleAdd() {
      this.isEdit = false
      this.addDialog2 = true
    },
    async initData() {
      try {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        const { data } = await rechargeSettingList(this.listQuery)
        this.total = data.meta.total
        this.tableList = data.list

      } catch (e) {
        console.error(e)
      }
    },

    handleDelete(row) {
      this.$confirm('此操作不可恢复，是否继续删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const { code, data } = await rechargeNoticeDel({
          id: row.id
        })
        if (code === 200) {

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initData()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleStatus(row) {
      if(row.status === 0) {

        this.$confirm('如启用该条数据另一条数据将自动设为禁用，是否确认启用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { code, data } = await rechargeNoticeStatus({
            id: row.id,
            status: 1,
            confirm: 1
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.initData()
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }else {
        this.$confirm('状态修改为禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { code, data } = await rechargeNoticeStatus({
            id: row.id,
            status: 0,
            confirm: 1
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.initData()
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {

          rechargeSettingSave(this.form).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.addDialog2 = false
              this.initData()
            }
          })
        }
      })
    },
    closeAddDialog2() {
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate() // 清除整个表单的校验
        this.$refs['form'].resetFields() // 清除整个表单的校验
      }
      this.form = {
        id: undefined,
        start_at: undefined,
        end_at: undefined,
        is_open: undefined,
      }
    }
  }
}
</script>

<style scoped>
.imageStyle {
  width: 150px;
}

.input {
  width: 200px;
}
</style>
